<template>
    <div class="bg">
        <div class="dateBox">
            <div class="week">{{ week }}</div>
            <div class="time">{{ time }}</div>
            <div class="date">{{ date }}</div>
            <!-- <div>王银浩</div> -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date: null,
            time: null,
            week: null,
        };
    },
    mounted() {
        this.date = this.getToday().date;
        this.time = this.getToday().time;
        this.week = this.getToday().week;
        const clock = setInterval(() => {
            this.date = this.getToday().date;
            this.time = this.getToday().time;
            this.week = this.getToday().week;
        }, 1000);
        // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
        this.$once("hook:beforeDestroy", () => {
            clearInterval(clock);
        });
    },
    methods: {
        // 日期时间格式化——获取当前日期时间，格式化为 2021/08/30 和 15:35:06
        getToday() {
            var datas = new Date();
            var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            var on1 = "/";
            var on2 = ":";
            var onY = datas.getFullYear(); //年
            var onM = datas.getMonth() + 1; //月
            var onD = datas.getDate(); //日
            var onS = datas.getHours(); //时
            var onF = datas.getMinutes(); //分
            var onN = datas.getSeconds(); //秒
            var week = weekText[datas.getDay()]
            console.log(week);

            if (onM >= 1 && onM <= 9) {
                //月
                onM = "0" + onM;
            }
            if (onD >= 1 && onD <= 9) {
                //日
                onD = "0" + onD;
            }
            if (onS >= 0 && onS <= 9) {
                //时
                onS = "0" + onS;
            }
            if (onF >= 0 && onF <= 9) {
                //分
                onF = "0" + onF;
            }
            if (onN >= 0 && onN <= 9) {
                //秒
                onN = "0" + onN;
            }


            return {
                date: onY + " / " + onM + " / " + onD,
                time: onS + on2 + onF + on2 + onN,
                week,
            };
        }
    },
}
</script>
<style scoped lang="less">
.bg {
    width: 100vw;
    height: 100vh;
    // background-color: black;
    background: url("@/assets/wallpaper/机械.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dateBox {
    color: yellow;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow:2px 3px 1px white;
    .time {
        font-size: 350px;
        font-family: "JIXIE";
        line-height: 350px;
    }
    .date {
        font-size: 120px;
        font-family: "JGFONT";
    }
    .week {
        font-size: 100px;
        font-family: "JGFONT";
    }
}
</style>